<template>
    <div>
      <el-dialog title="灰度内测" :visible.sync="grayscaleBetaData.dialog" width="70%">
        <el-row :gutter="10">
          <el-col>
        <div class="edit_dev">
          <el-transfer
            filterable
            filter-placeholder="请输入设备标识"
            v-model="value"
            :titles="['所有设备', '内测设备']"
            :render-content="renderFunc"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            :data="data">
          </el-transfer>
        </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="grayscaleBetaData.dialog = false">取 消</el-button>
          <el-button type="primary" @click="initiateTest">发起内测</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import * as appDeviceManageApi from '../../appDeviceManage/api'
  import * as api from './api'
export default {
    name: "grayscaleBeta",
    props: {
      // 设备id
      grayscaleBetaData: {
        type: Object
      }
    },
    data() {
        return {
          data: [],
          value: [],
        }
    },
    created() {
      this.init()
    },
    mounted() {
    },
    methods: {
      init(){
        appDeviceManageApi.GetList({ application: this.grayscaleBetaData.application,query:"{id,device_id,version_number}"  ,limit: 999}).then(ret => {
          if (ret.code === 2000) {
            let data =[]
            ret.data.data.map(value=>{
              data.push({
                label:value.device_id,
                versionNumber:value.version_number,
                key:value.id,
              })
            })
            this.data = data
          }
        })
      },
      initiateTest(){
        api.InternalTest({device_ids: this.value,version_id: this.grayscaleBetaData.versionId}).then(ret=>{
          if (ret.code === 2000) {
            this.grayscaleBetaData.dialog = false
            this.$message({
              type: 'success',
              message: '发起内测成功!'
            });
          }
        })
      },
      renderFunc(h, option) {
        if (option.versionNumber){
          return <span>{ option.label }-<span style="color: #67c23a">{ option.versionNumber }</span></span>;
        }
        return <span>{ option.label }</span>;
      }
    }

}
</script>

<style scoped>
  .edit_dev >>> .el-transfer-panel {
    width:41%;
  }
</style>
